<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        width: 200px;
        height: 320px;
        background-color: #f6f5f4;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        font-family: 'Adwaita Sans', 'Inter', Helvetica, Arial, sans-serif;
        font-size: 75%;
      }
      .with-drop-shadow {
        filter: drop-shadow(rgb(122, 122, 122) 0rem 0rem 5px);
      }
      .switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 34px;
      }
      .switch input {
        opacity: 0;
        width: 0;
        height: 0;
      }
      .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: .15s;
        border-radius: 34px;
      }
      .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        transition: .15s;
        border-radius: 50%;
      }
      input:checked + .slider {
        background-color: #2196F3;
      }
      input:checked + .slider:before {
        transform: translateX(26px);
      }
      .button {
        background-color: #c2e4ff;
        padding: 10px 15px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        border-radius: 5px;
        transition: .25s;
      }
      .video-button-content {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        color: black;
      }
      .video-button-content span {
        font-weight: bold;
      }
      .button:hover {
        background-color: #9bd2ff;
      }
      @media (prefers-color-scheme: dark) {
        body {
          color: white;
          background-color: #242424;
        }
        .with-drop-shadow {
          filter: drop-shadow(rgb(39, 39, 39) 0rem 0rem 5px);
        }
        .feather-icons {
          filter: invert(100%);
        }
        .button {
          background-color: #00559b;
        }
        .button:hover {
          background-color: #0c3150;
        }
        .video-button-content {
          color: white;
        }
      }
    </style>
  </head>
  <body>
    <center>
      <br>
      <div style="display: flex; justify-content: center; align-items: center;">
        <img class="feather-icons with-drop-shadow"; src="download.png">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <img class="feather-icons"; src="arrow-right.png">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <img class="with-drop-shadow"; src="icon48.png">
      </div>
      <br>
      <label class="switch">
        <input type="checkbox" id="toggleSwitch">
        <span class="slider"></span>
      </label>
      <br><br>
      <hr><br>
      <a href="#" class="video-button button">
        <div class="video-button-content">
          <img class="feather-icons" src="video.png">
          <span>Get Video</span>
        </div>
      </a>
      <br><br>
      <hr><br>
      <label class="number">
        <span>Minimum Download Size (MiB):</span>
        <br><br>
        <input type="number" id="downloadSize" min="0">
      </label>
      <br>
    </center>
    <script src="popup.js"></script>
  </body>
</html>
